<template>
  <div class="app-container">
    <div class="chart-container">
      <div id="main" style="width: 60%; height: 600px;"></div>
      <div id="pie" style="width: 35%; height: 600px;"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getList } from '@/api/emp.js'
export default {
    mounted() {
        this.initChart() // 确保 DOM 已挂载
    },
    methods: {
        initChart() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'))
            // 调用API获取员工数据

            getList().then(response => {
              const empData = response.data.data;
              console.log(response.data)
              // 职位数字转名称映射（1:班主任，2:讲师，3:学工主管，4:教研主管）
              const jobMap = { 1: '班主任', 2: '讲师', 3: '学工主管', 4: '教研主管' };
              // 统计职位分布
              const countMap = { '班主任': 0, '讲师': 0, '学工主管': 0, '教研主管': 0, '其他': 0 };
              empData.forEach(emp => {
                const jobName = jobMap[emp.job] || '其他';
                countMap[jobName]++;
              });
              // 绘制图表
              // 在setOption配置中添加组合图表
              myChart.setOption({
                title: { text: '职位分布 - 柱状图与趋势线' },
                tooltip: { trigger: 'axis' },
                legend: { data: ['人数', '趋势'] },
                xAxis: {
                  type: 'category',
                  data: Object.keys(countMap)
                },
                yAxis: { type: 'value' },
                series: [
                  {
                    name: '人数',
                    type: 'bar',
                    barWidth: '60%',
                    data: Object.values(countMap),
                    itemStyle: {
                      color: '#5470c6',
                      borderRadius: [8, 8, 0, 0]
                    },
                    label: {
                      show: true,
                      position: 'top',
                      color: '#333',
                      fontSize: 14,
                      fontWeight: 'bold',
                      formatter: '{c}'
                    }
                  }
                ]
              });

              // 新增饼图实例
              const pieChart = echarts.init(document.getElementById('pie'));
              // 在职位统计后添加性别统计
              let maleCount = 0;
              let femaleCount = 0;
              empData.forEach(emp => {
                if (emp.gender === 1) maleCount++;
                else if (emp.gender === 2) femaleCount++;
              });

              // 原饼图配置保持不变
              const genderData = [
                { value: maleCount, name: '男性' },
                { value: femaleCount, name: '女性' }
              ];

              pieChart.setOption({
                title: { text: '性别比例', left: 'center' },
                tooltip: { trigger: 'item' },
                legend: { orient: 'vertical', left: 'left' },
                series: [
                  {
                    type: 'pie',
                    radius: '55%',
                    data: genderData,
                    emphasis: {
                      itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                    },
                    itemStyle: {
                      color: function(params) {
                        return params.dataIndex === 0 ? '#587AB3' : '#3C5276';
                      }
                    }
                  }
                ]
              });
            })
        }
    }
}

</script>

<style scoped>
.chart-container {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

#main, #pie {
  height: 600px;
  margin: 0 10px;
}
</style>

